Demo

Attention! Search feature will not work locally. It works only on a hosting-server with PHP enabled.

Enter a word to search for: For instance: lorem, ipsum, dolor

Description

Files needed to work with the form:

  • jquery-1.7.1.min.js – jQuery library (the form will work with this version of library only);
  • search.css – stylesheet file, which is being used for the search results pages stylization;
  • search.php – page, where the search results will appear;
  • search.js – script, which is responsible for the search results output in an iframe on the page search.php;
  • results.php – PHP script, which actually performs the search.

To make the form work correctly, proper parameters should be set:

<form id="search" action="search.php" method="GET" accept-charset="utf-8">
   <input type="text" name="s" />
   <a onclick="document.getElementById('search').submit()">Search</a>
</form>

In this form we should define such parameters as: action="search.php" and method="get", also set parameter for an input: name="s". If you want to change the name of the search form, which is id="search" by default, you should change it on the line 3 in the file search.js as well, you can find it in search folder.

Settings

Note, search form is enabled, configured and works by default. These steps are required if you are trying to use this search form in another project/template without working search form.

To make the form work correctly, please, perform the following steps:

  • copy search folder to the root directory with your *.html files;
  • move file search.php from the search folder to the root directory (with *.html files);
  • edit your form, using the directions above;
  • copy partly header and footer with all the connected scripts in the section <head></head> to the page search.php, but necessarily add connection of the file search.js. For example: 
    <link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/fonts.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">

<script src="js/jquery-1.7.1.min.js"></script>
<script src="search/search.js"></script>
  • for the search results output add the following block to your content: 
    <h3>Search result:</h3>
<div id="search-results"></div>
  • change style of the search results, using search.css.

All the rest main styles of your template will be automatically pulled from the file style.css by the PHP script.